<template>
  <div class="batch-booking-area">
    <div class="middle">
      <bread-crumb class="bread-crumb-padding" :list="breadCrumb"></bread-crumb>
      <div class="flx-row-bw-s">
        <div class="left-area">
          <div class="flx-row-s-c" style="margin-bottom: 15px">
            <input
              v-model.trim="search"
              type="text"
              class="search-input"
              placeholder="请输入关键词试试"
              maxlength="50"
              @keyup.enter="submit"
            />
            <div class="user-strong-button search-button" @click="submit">
              搜索
            </div>
          </div>
          <div class="bottom-area">
            <div class="b-b">
              <h3 class="title-h3" style="margin: 20px 19px 13px">搜索结果</h3>
            </div>
            <Spin :withIcon="true" v-if="loading"></Spin>
            <Empty-State
              v-if="searchEmpty && !loading && total == null"
              style="background-color: #fff"
              content="请输入搜索关键词！"
            ></Empty-State>
            <div class="list-area" v-if="total != null && total > 0">
              <div
                class="flx-row-bw-c search-list-item"
                v-for="(item, index) in list"
                :key="index"
              >
                <div class="flx-row-s-c">
                  <span class="c-d2 dn">{{ item.domainName }}</span>
                  <div class="tips t-bi" v-if="item.type == 1">竞价</div>
                  <div class="tips t-bo" v-if="item.type == 0">预订</div>
                </div>
                <div class="flx-row-s-c">
                  <span class="c-d2">{{
                    item.price ? "￥" + item.price : "-"
                  }}</span>
                  <div
                    v-if="item.type == 0"
                    class="user-normal-button small-button-size"
                    style="width: 80px; margin-left: 15px"
                    @click="toBook(item.id)"
                  >
                    立即预订
                  </div>
                  <div
                    v-if="item.type == 1"
                    class="user-normal-button small-button-size"
                    style="width: 80px; margin-left: 15px"
                    @click="tobidding(item.id)"
                  >
                    立即出价
                  </div>
                </div>
              </div>
              <div class="flx-row-e-c page-area">
                <Page
                  :total="total"
                  :current="page"
                  :page-size="pageSize"
                  :page-size-opts="pageSizeOpts"
                  @on-change="pageChange"
                  @on-page-size-change="pageSizeChange"
                  show-elevator
                  show-sizer
                  show-total
                />
              </div>
            </div>
            <Empty-State
              style="background-color: #fff"
              v-if="total != null && total == 0"
              content="未搜索到任何内容！"
            ></Empty-State>
          </div>
        </div>
        <div class="news-right-area">
          <div class="box">
            <div class="b-b">
              <h3 class="title-h3" style="margin: 20px 19px 13px">推荐预订</h3>
            </div>
            <table class="table-area">
              <tbody>
                <tr v-for="(item, index) in recommendList" :key="index">
                  <td>
                    <div class="line-style">
                      <span class="normal-f f-ell-sin" :title="item.name">{{
                        item.name
                      }}</span>
                    </div>
                  </td>
                  <td>
                    <div class="line-style">
                      <span class="normal-f f-ell-sin">{{ item.meaning }}</span>
                    </div>
                  </td>
                  <td>
                    <div class="line-style">
                      <div class="button button-size" @click="toBook(item.id)">
                        前往预订
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { hotBooking, searchDN } from "@/api/data";
export default {
  data() {
    return {
      loading: false,
      breadCrumb: [{ name: "域名搜索", to: "/dmsearch" }],
      search: "",
      recommendList: [],
      beforeSearch: true,
      searchEmpty: false,
      // 分页设置
      total: null,
      pageSizeOpts: [50, 100, 200],
      pageSize: 50,
      page: 1,
      list: [],
    };
  },
  watch: {
    "$route.query.key": {
      handler(newValue) {
        this.search = newValue;
        if (this.search != null && this.search != "") {
          this.getList();
        } else {
          this.searchEmpty = true;
        }
        this.$nextTick(() => {
          window.scrollTo(0, 0);
        });
      },
    },
  },
  created() {
    this.search = this.$route.query.key;
    if (this.search != null && this.search != "") {
      this.getList();
    } else {
      this.searchEmpty = true;
    }
    this.hotBooking();
  },
  methods: {
    // 搜索
    submit() {
      if (this.search == null || this.search == "") {
        this.$Message.warning("请输入搜索内容");
        return;
      }
      this.$router.push({
        name: "dmsearch",
        query: {
          key: this.search,
        },
      });
    },
    // 获取推荐预订
    async hotBooking() {
      let res = await hotBooking();
      if (res.code == 200) {
        this.recommendList = res.data.bookingList;
      }
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getList();
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
    // 搜索列表
    async getList() {
      this.loading = true;
      let params = {
        kw: this.search,
        limit: this.pageSize,
        page: this.page,
        type: 0,
      };
      let res = await searchDN(params);
      if (res.code == 200) {
        this.list = res.data.list;
        this.total = res.data.total;
      }
      this.loading = false;
    },
    // 跳转到预订详情
    toBook(id) {
      window.location.href = `/booking/${id}`;
      // this.$router.push({
      //   name: "bookdetail",
      //   query: {
      //     id: id,
      //   },
      // });
    },
    // 跳转到竞价详情
    tobidding(id) {
      window.location.href = `/bidding/${id}`;
      // this.$router.push({
      //   name: 'biddingdetail',
      //   query: {
      //     id: id
      //   }
      // })
    },
  },
};
</script>

<style lang="scss" scoped>
.batch-booking-area {
  background-color: #f7f7f7;
  padding-bottom: 20px;

  .left-area {
    width: 750px;
    .search-input {
      height: 50px;
      width: 100%;
      line-height: 50px;
      padding: 0 30px;
      font-size: 16px;
      background-color: #fff;
    }
    .search-button {
      @include size(120px, 50px);
      font-size: 16px;
      font-weight: 600px;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
      flex-shrink: 0;
    }
    .bottom-area {
      background-color: #fff;
      position: relative;
      box-shadow: 0px 0px 11px 2px rgba(0, 16, 36, 0.02);
      min-height: 400px;
      border: 1px solid #eaeaea;
      padding-bottom: 30px;
    }
    .list-area .search-list-item:nth-child(even) {
      background-color: #f9fafb;
    }
    .list-area .search-list-item:nth-child(odd) {
      background-color: #fff;
    }
    .search-list-item {
      width: 100%;
      height: 50px;
      padding: 0 30px 0 40px;
      font-size: 14px;
      transition: transform 0.1s, box-shadow 0.3s;

      &:hover {
        transform: scale(1.01);
        box-shadow: 0 2px 12px 0 rgba(#000, 0.1);
      }
      .dn {
        max-width: 325px;
        @include f-ell-sin;
      }
      .tips {
        @include size(49px, 22px);
        @include bg-setting(null, cover, center);
        font-size: 12px;
        text-align: center;
        line-height: 22px;
        margin-left: 12px;
        &.t-bi {
          background-image: url("~@/assets/images/tips-1@2x.png");
          color: #f9521f;
        }
        &.t-bo {
          background-image: url("~@/assets/images/tips-2@2x.png");
          color: #2abf69;
        }
      }
    }
  }
  .news-right-area {
    width: 435px;

    .box {
      background-color: #fff;
      box-shadow: 0px 0px 11px 2px rgba(0, 16, 36, 0.02);
      border: 1px solid #eaeaea;
      padding-bottom: 30px;
    }
  }
  .table-area tr:nth-child(even) {
    background-color: #f9fafb;
  }
  .table-area tr:nth-child(odd) {
    background-color: #fff;
  }
  .b-b {
    border-bottom: #e5e5e5 solid 1px;
  }
}
.page-area {
  width: 100%;
  height: 66px;
  padding: 0 30px;
}
</style>
